/**
 *@author：yc
 *@pramas: 
  * "imgsAttrName",Object,图片的属性命名，用于上传后台服务的图片分类命名.输入格式：{clazz:'xxx',columnName:'xxx'}
  * "itemAttr"，String,图片所属的物品类别
  * "importFileUrl",String,上传图片的后台服务地址，默认是通用后台地址
  * "isMultImgs",Boolean,是否禁用，非必填默认false
	*@return:response-handler方法，返回图片存储的位置信息
 * 备注：
 */
<template>
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" customClass="customStyle">
		<el-form :model="configform" ref="configform" :rules="rules" label-width="100px">
			<el-form-item v-for="(columnValue, columnKey) in configform" :label="transAttrName(columnKey)" v-if="isEditEnabled(columnKey)">
				<el-col :span="12">
					<el-select v-if="isShowSelectList(columnKey)" v-model="configform[columnKey]" filterable placeholder="请选择">
						<!--<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>-->
						<el-option v-for="item in getSelectOption(columnKey)" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
					<el-input v-else style="width:100%" v-model="configform[columnKey]"
						:clearable="true" :readonly="isShowUploadPic(columnKey)"></el-input>
				</el-col>
				<el-col :span="12" v-if="isShowUploadPic(columnKey)">
					<!-- <el-upload
					  class="avatar-uploader"
					  :action="urlPaths.importFileUrl"
					  accept="image/jpeg,image/gif,image/png"
					  :data="uploadDatas"
					  ref="upload"
					  :multiple="false"
					  :show-file-list="false"
					  :before-upload="(file)=>{return beforeAvatarUpload(file,columnKey)}"
					  :on-success="(res,file)=>{return handleAvatarSuccess(res,file,columnKey)}"
					  :onError="handleAvatarError"
					  >
					   <img v-if="uploadImgs[columnKey]" :src="uploadImgs[columnKey]" class="avatar">
					   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload> -->
					<m-upload-img :imgsAttrName="imgsAttrName" :itemAttr="columnKey" :isMultImgs="isMultImgs" @response-handler="afterUploadHandler">
					</m-upload-img>
				</el-col>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">取 消</el-button>
			<el-button type="primary" @click="saveSubmit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	export default {
		name:'m-dialog-newandmod',
		props: {
			configform: { // 对话框绑定的form表单数据
				type: Object,
				default () {          
					return  {}        
				} 
			},
			tableColumn: { // 对话框绑定的列信息
				type: Object,
				default () {          
					return  {}        
				} 
			},
			dialogTitle: { // 对话框显示名称
			  type: String,
			  default: 'Dialog'
			},
			dialogVisible: { // 是否显示对话框
			  type: Boolean,
			  default: false
			},
			urlPaths:{ // 访问服务的后台路径
				type: Object,
				default () {          
					return  {}        
				} 
			},
			imgsAttrName: { // 图片的属性命名
			  type: Object,
			  default () {          
			  	return {
					clazz:'undefined',
					columnName:'undefined'
				}       
			  } 
			},
			isMultImgs: { // 是否允许传多图片
			  type: Boolean,
			  required: false,
			  default: true
			},
			getSelectOption: { // 获取下拉框数据的方法
			  type: Function,
			  required: false,
			  // default: emptyFunc
			},
			submitCallback:{ // 提交表单后回调的方法
			  type: Function,
			  required: false,
			  // default: emptyFunc
			},
			rules: { // 对话框绑定的form表单
				type: Object,
				required: false,
				default () {          
					return  {}        
				} 
			},
			customStyle:{ // 对话框自定义格式
				type: Object,
				required: false,
				default () {          
					return  {}        
				} 
			}
		},
	  data () {
		return {
			
	//     	randomId:'mychart'+ Date.now() + Math.random(),
		}
	  },
		mounted() {
		},
		computed:{
			/**
			 * @author：01367604
			 * @function: 转换表单中显示的属性名称，将英文列名转换成中文描述
			 * @pramas: 
			 */
			transAttrName(value){
				return function (value){
//					#console.log(value);
					var colElem = this.tableColumn.find((element) => (element.columnName == value))
					if (colElem.columnLabel != undefined && colElem.columnLabel.length>0){
						return colElem.columnLabel;
					} else {
						return colElem.columnName;
					}
				}
			},
			/**
			 * @author：yc
			 * @function: 新增和修改model框是否显示（编辑）某属性
			 * @pramas: 
			 */
			isEditEnabled(value){
				return function (value){
					var colElem = this.tableColumn.find((element) => (element.columnName == value))
					return colElem.isModifyDialogEnabled != undefined && colElem.isModifyDialogEnabled;
				}
			},
			/**
			 * @author：01367604
			 * @function: 新增和修改model框中显示下拉框
			 * @pramas: 
			 */
			isShowSelectList(value){
				return function (value){
					var colElem = this.tableColumn.find((element) => (element.columnName == value))
					return colElem.isInputSelectList != undefined && colElem.isInputSelectList;
				}
			},
			/**
			 * @author：yc
			 * @function: 新增和修改model框中是否上传图片组件
			 * @pramas: 
			 */
			isShowUploadPic(value){
				return function (value){
					return(value === 'imgUrl' || value==='wapBannerUrl' 
					    || value==='iconUrl' || value==='bannerUrl');
				}
			}
		},
	  methods: {
		emptyFunc(){},
		cleanUploadFile(){
// 			for (var uploadItem of this.$refs.uploadHandler){
// 				uploadItem.clearFiles();
// 			}
		},
		afterUploadHandler(data){
			// console.log(data);
			this.configform[data.columnName] = data.res;
		},
		/*提交*/
		saveSubmit(){				
//				this.$refs.configform.validate((valid) => {
//					if(valid) {
//						
//						}
//					}
//				});
			var that = this;
			if(this.dialogTitle == '新增') {
//							that.configform.id = '';
				var url = this.urlPaths.insert;
			} else {
				var url = this.urlPaths.updateByKey;
			}
			console.log(url);
			console.log(that.configform);
// 			this.$httpExt().post(url,that.configform).then((response) => {
// 				if(response.succ == 'ok') {
// 					that.dialogVisible = false;
// // 					if(this.dialogTitle == '新增') {
// // 						var currentPage = 1;
// // 					} else {
// // 						currentPage = that.pagination.currentPage;
// // 					}
// 					that.submitCallback();
// 				}
// 			}, (data) => {
// 				Message({
// 					message: data.msg ? data.msg : '服务器请求失败，请重试！',
// 					type: 'warning'
// 				});
// 			});
//				this.tableDatalist.push(that.configform);
			this.cleanUploadFile();
		},
		closeDialog(){
			this.cleanUploadFile();
			this.dialogVisible = false;
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .linecharts{
//     width: 100%;
// }
</style>
